<template>
  <div class="wrap">
    <div class="title" v-if="resCouponList.length > 0">
      当前空白优惠券：{{ couponNum }}张
    </div>
    <div class="couponList" v-if="resCouponList.length > 0">
      <div class="couponItem" v-for="(item,index) in resCouponList" :key="index">
        <div class="balckCoupon">店铺优惠券</div>
        <div class="contenInfo">
          <div class="price"><em>￥</em>{{ item.discountsPrice }}</div>
          <div class="condition">
            <p class="conditionTitle">满{{ item.thresholdPrice }}元可用</p>
            <p class="conditionDate" v-if="item.outTime">有效期至{{ item.outTime }}</p>
            <p class="conditionDate" v-else>永久有效</p>
          </div>
          <img src="@/assets/couponDele.png" alt="" class="couponDele" @click="deleCoupon(item)"/>
        </div>
      </div>
    </div>
    <div class="couponExplain" v-else>
      您的店铺还没有优惠券可供买家使用，快去新增优惠券吧~
    </div>
    <div style="height:100px;"></div>
    <div class="addButton" @click="jumpAdd">新增</div>
  </div>
</template>

<script>
import {
  apiShopCouponListCoupon,
  apiDeleteShopCoupon,
  apiPlatformGetUserShopDetails,
} from "@/request/api"; // api接口
import { Dialog } from "vant";
export default {
  name: "App",
  data() {
    return {
      resCouponList: "", //店铺已有优惠券
      couponNum:''
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    this.getShopCouponList();
    this.getShopcouponNum();
  },
  methods: {
    //查询店铺已有的优惠券
    getShopCouponList() {
      apiShopCouponListCoupon({}).then((res) => {
        this.resCouponList = res.data;
        console.log("已存在的优惠券", this.resCouponList);
      });
    },
    getShopcouponNum(){
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.couponNum = res.data.couponNum;
        console.log("空白优惠券数量", this.couponNum);
      });
    },
    //是否有空白优惠券可供商家填写：有 则跳转新增优惠券
    jumpAdd() {
      var that = this;
        if (this.couponNum == 0) {
          //没有优惠券面额 不能填写
          Dialog.confirm({
            message: `你当前暂无空白优惠券，是否立即购买？`,
          })
            .then(() => {
              that.$router.push({
                path: "/pages/bBuyCouponMenu",
                query: {},
              });
            })
            .catch(() => {
              // on cancel
            });
        } else {
          that.$router.push({
            path: "/pages/bAddCoupon",
            query: {},
          });
        }
    },
    //删除优惠券:
    deleCoupon(itemData) {
      var that = this;
      Dialog.confirm({
        message: `确定删除优惠金额为“${itemData.discountsPrice}”的优惠券吗?删除无法恢复,确认删除?`,
      })
        .then(() => {
          apiDeleteShopCoupon({
            id: itemData.id,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.success("删除成功");
              that.getShopCouponList();
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {},
  components: {
    [Dialog.name]: Dialog,
  },
};
</script>

<style scoped>
.wrap {
  /* min-height: 100vh; */
  background-color: #fff;
}
.title {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin: 20px;
}
.couponExplain {
  width: 60%;
  margin: 0 auto;
  line-height: 30px;
  font-size: 600;
  text-align: center;
  border-radius: 15px;
  font-size: 16px;
  margin-top: 30vh;
}
.couponItem {
  width: 90%;
  margin: 0 auto;
  height: 98px;
  background: #f2f4fa;
  border-radius: 15px;
  margin-bottom: 15px;
}
.couponList {
}
.balckCoupon {
  width: 90px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #181818;
  border-radius: 13px 0px 13px 0px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}
.contenInfo {
  margin-top: 15px;
  overflow: hidden;
}
.price {
  float: left;
  color: #ff4646;
  font-size: 30px;
  margin-top: 10px;
  margin-left: 25px;
}
.price em {
  font-size: 12px;
}
.condition {
  float: left;
  margin-left: 35px;
}
.conditionTitle {
  font-size: 12px;
  font-weight: 600;
  color: #000000;
}
.conditionDate {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 400;
  color: #666666;
}
.couponDele {
  float: right;
  width: 25px;
  margin-right: 15px;
}
.addButton {
  position: fixed;
  width: 95%;
  left: 2.5%;
  bottom: 15px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
